<template>
	<div id="info">
		<Top :msg="this.$route.path"></Top>
		<div class="top">
			<p>万息招聘在线数据显示</p>
			<a href="javascript:;" @click="mediaCoop">媒体合作</a>
		</div>
		<div class="data-show">
			<ul class="data-head-list wrap clearfixed">
				<li v-for="item in 3" :key="item">
					<div class="layer">
						<div class="data-head-title">
							<span>数据报告</span>
							<a href="Javascript:;">more</a>
						</div>
						<a href="javascript:;" class="img1-box">
							<img src="../../static/img/scenery1-5.jpg" alt="" title="这是图片的描述" />
						</a>
						<div class="data-head-details">
							拿不到年终奖就跳槽？80后或成最硬核职场人 | 2018年终奖调查
						</div>
						<a href="javascript:;" class="look-details">查看详情</a>
					</div>
				</li>
			</ul>
			<ul class="data-bottom-list wrap">
				<li v-for="item in 5" :key="item">
					<div class="item">
						<a href="javascript:;" class="img2-box"><img src="../assets/img/scenery1-6.jpg" alt="" /></a>
						<div class="left-intro">
							<a href="javascript:;">百万岗位虚位以待，全国首个城市网络招聘节在嘉兴开幕</a>
							<div class="left-intro-details">
								2月22日下午，由嘉兴市人民政府主办的“嘉兴万家企业百万岗位网络招聘节”正式启动。包括五芳斋等名企在内的上万家企业将为全国求职者在线提供超过一百万个就业岗位，通过网络搭台，用工双方实现“无接触高效招聘
							</div>
							<div class="left-intro-orther">
								<span class="left-intro-position">人民网-浙江频道</span> ·
								<span class="left-intro-time">2020-02-29</span>
							</div>
						</div>
					</div>
					<div class="hot-artical">干货文章</div>
				</li>
				<div class="look-more">浏览更多</div>
			</ul>
		</div>

		<Bottom></Bottom>
		<div class="media-box">
			<el-dialog title="媒体合作" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
				<el-form ref="form" :rules="rules" refl="ruleForm" :model="form" label-width="80px">
					<el-form-item label="邮箱" prop="email">
						<el-input v-model="form.email" placeholder="请输入您的邮箱"></el-input>
					</el-form-item>
					<el-form-item label="手机号" prop="phone">
						<el-input v-model="form.phone" placeholder="请输入您的手机号"></el-input>
					</el-form-item>
					<el-form-item label="姓名" prop="name">
						<el-input v-model="form.name" placeholder="请输入您的姓名"></el-input>
					</el-form-item>
					<el-form-item label="公司" prop="company">
						<el-input v-model="form.company" placeholder="请输入您的公司名称"></el-input>
					</el-form-item>
					<el-form-item label="标题" prop="title">
						<el-input v-model="form.title" placeholder="请输入您的Title"></el-input>
					</el-form-item>
				</el-form>
				<el-button type="primary" @click="mediaSubmit" style="width: 100%;">提交</el-button>
			</el-dialog>
		</div>
	</div>
</template>

<script>
	import Top from './top'
	import Bottom from './bottom'
	export default {
		components: {
			Bottom,Top
		},
		data() {
			return {
				dialogVisible: false,
				form: {
					name: ''
				},
				rules:{
					email:[ { required: true, message: '请输入邮箱', trigger: 'blur' },],
					phone:[{ required: true, message: '请输入手机号码', trigger: 'blur' },],
					name:[{ required: true, message: '请输入姓名', trigger: 'blur' },],
					company:[{ required: true, message: '请输入公司名称', trigger: 'blur' },],
					title:[{ required: true, message: '请输入标题', trigger: 'blur' },],
				},
				bottomService: [{
						'title': '企业服务',
						children: [{
							'title': '职位搜索',
							'title': '新闻资讯',
							'title': '万息招聘APP'
						}]
					},
					{
						'title': '使用与帮助',
						children: [{
							'title': '用户协议与隐私政策',
							'title': '防骗指南',
							'title': '职位发布规则',
							'title': '使用帮助'
						}]
					},
					{
						'title': '联系我们',
						children: [{
							'title': '成都万息科技有限公司',
							'title': '公司地址',
							'title': '职位发布规则',
							'title': '使用帮助'
						}]
					}
				],

			}
		},
		methods: {
			handleClose(done) {
				this.dialogVisible = false;

				//				this.$confirm('确认关闭？')
				//					.then(_ => {
				//						done();
				//					}).catch(_ => {});
			},
			mediaCoop() {
				this.dialogVisible = true;
			},

			//提交
			mediaSubmit() {
				this.dialogVisible = false;
			}
		}
	}
</script>

<style>
	a {
		text-decoration: none;
	}
	
	.wrap {
		max-width: 1200px;
		margin: 0 auto;
	}
	
	.top {
		background-color: rgba(0, 0, 0, .7);
		text-align: center;
		padding: 70px 0 150px;
	}
	
	.top p {
		font-size: 36px;
		color: #fff;
	}
	
	.top a {
		padding: 8px 45px;
		display: inline-block;
		color: #fff;
		border-radius: 20px;
		background-color: #00BFFF;
		font-size: 20px;
	}
	
	.top a:hover {
		background-color: #00BFCC;
	}
	
	.data-show {
		border: 1px solid transparent;
		background-color: #f1f1f1;
		padding-bottom: 50px;
	}
	/*第一个列表*/
	
	.data-head-list {
		/*float: left;*/
		padding: 40px 0px;
		margin-top: -70px;
		background-color: #fff;
		border-top-left-radius: 20px;
		border-top-right-radius: 20px;
	}
	
	.data-head-list li {
		float: left;
		width: 33.33%;
	}
	
	.data-head-list li .layer {
		padding: 0 50px;
	}
	
	.data-head-list li img {
		width: 100%;
		transition: all .5s;
		overflow: hidden;
	}
	
	.data-head-list .img1-box {
		display: inline-block;
		margin: 35px auto 25px;
		overflow: hidden;
	}
	
	.data-head-list li img:hover {
		transform: scale(1.1);
	}
	
	.data-head-list li:nth-child(2) .layer {
		border-left: 1px solid #eee;
		border-right: 1px solid #eee;
	}
	
	.data-head-title {
		display: flex;
		justify-content: space-between;
	}
	
	.data-head-title span {
		font-size: 18px;
		position: relative;
		padding-left: 15px;
	}
	
	.look-details:hover {
		color: #00BFFF;
	}
	
	.data-head-title span:before {
		content: "";
		display: block;
		position: absolute;
		top: 3px;
		left: 0;
		width: 3px;
		height: 18px;
		background-color: #00BFFF;
	}
	
	.data-head-title a {
		border: 1px solid #ccc;
		color: #ccc;
		font-size: 14px;
		border-radius: 15px;
		padding: 2px 7px;
		box-sizing: border-box;
		transition: all .3s;
	}
	
	.data-head-title a:hover {
		color: #fff;
		background-color: #00BFFF;
	}
	
	.data-head-details {
		color: #333;
		font-size: 20px;
	}
	
	a.look-details {
		color: #999;
		font-size: 14px;
		display: inline-block;
		margin-top: 10px;
	}
	/*底部列表*/
	
	.data-bottom-list {
		padding: 20px 100px;
		margin-top: 20px;
		box-sizing: border-box;
		background-color: #fff;
	}
	
	.data-bottom-list li {
		position: relative;
	}
	
	.hot-artical {
		position: absolute;
		top: 50px;
		left: -5px;
		color: #fff;
		padding: 2px 5px;
		background-color: #00BFFF;
		font-size: 12px;
		border-top-right-radius: 10px;
		border-bottom-right-radius: 10px;
	}
	
	.data-bottom-list .item {
		color: #333;
		padding: 35px 0;
		box-sizing: border-box;
		display: flex;
		border-bottom: 1px solid #ddd;
	}
	
	.data-bottom-list li:last-of-type .item {
		border-bottom: none;
	}
	
	.data-bottom-list .item .img2-box {
		overflow: hidden;
		display: inline-block;
		width: 70%;
	}
	
	.data-bottom-list .item img {
		display: block;
		width: 100%;
		height: 100%;
		transition: all .5s;
	}
	
	.data-bottom-list .item img:hover {
		transform: scale(1.1);
	}
	
	.left-intro {
		margin-left: 50px;
		display: flex;
		flex-flow: column wrap;
		justify-content: space-between;
	}
	
	.left-intro a {
		font-size: 20px;
		color: #333;
		transition: all .3s;
	}
	
	.left-intro a:hover {
		color: #00BFFF;
	}
	
	.left-intro-details {
		margin: 30px 0 20px;
		font-size: 15px;
		color: #666;
		line-height: 1.7;
	}
	
	.left-intro-orther span {
		color: #999;
		font-size: 14px;
	}
	
	.look-more {
		height: 60px;
		border: 1px solid #ddd;
		line-height: 60px;
		text-align: center;
		font-size: 18px;
		color: #ddd;
		cursor: pointer;
		transition: all .3s;
	}
	
	.look-more:hover {
		color: #00BFFF;
		background-color: #fafafa;
	}
	/*媒体合作弹出框*/
	
	.media-box .el-dialog__header {
		border-bottom: 1px solid #ddd;
	}
	
	.info .el-dialog__title {
		font-size: 20px;
	}
	
	.media-box .el-button {
		margin-top: 30px;
	}
</style>